<template>
    <div class="top-handle-bar">
      <a-space>
        <mars-icon icon="send" width="20" @click="flyToGraphic" title="飞行定位"></mars-icon>
        <mars-icon icon="delete" width="20" @click="deleteEntity" title="删除"></mars-icon>
        <mars-icon icon="save" width="20" @click="getGeoJson" title="导出geojson"></mars-icon>
      </a-space>
    </div>
    <div class="attr-editor-main">
      <mars-styles :style="style" :layerName="layerName" :customType="customType" :graphicType="graphicType" @styleChange="styleChange" />
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, toRaw, reactive } from "vue"
import _ from "lodash"
import MarsStyles from "./mars-styles.vue"
import * as mapWork from "./map"
import useLifecycle from "@mars/widgets/common/uses/use-lifecycle"
import { useWidget } from "@mars/widgets/common/store/widget"
// const { currentWidget } = useWidget()
// console.log('currentWidget: ', currentWidget);

const layerName = ref("")
const customType = ref("")
const graphicType = ref("")
const style = ref(null)
const props = defineProps({
  graphic: {
    type: Object,
    default: () => ({})
  }
})

const graphic = reactive(props.graphic)


// 启用map.ts生命周期
useLifecycle(mapWork)

onMounted(() => {
  updataLayer()
})

// 监听到矢量数据发生变化
function updataLayer() {
  if (!graphic) {
    return
  }

  layerName.value = graphic._layer.name || ""
  graphicType.value = graphic.type
  style.value = _.cloneDeep(graphic.style)
}

// 样式修改
function styleChange(style: any) {
  style = toRaw(style)
  // console.log("修改了style样式", style)
  graphic.setStyle(style)
}

// *********************  删除定位保存文件方法  ******************* //
function getGeoJson() {
  const geojson = graphic.toGeoJSON() // 文件处理

  mapWork.downloadFile("标绘item.json", JSON.stringify(geojson))
}

function flyToGraphic() {
  mapWork.flyToGrapgic(graphic) // 事件处理
}

function deleteEntity() {
  graphic.remove() // 删除
}
</script>
<style lang="less" scoped>
.top-handle-bar {
  border-bottom: 1px solid #cde1de;
  padding: 5px 0 2px 0;
  :deep(.mars-icon) {
    cursor: pointer;
  }
}
.attr-editor-main {
  height: calc(100% - 40px);
  overflow-y: auto;
  :deep(*) {
    font-size: 12px;
  }
}
:deep(.ant-tabs-nav) {
  margin: 0;
}
:deep(.ant-select),
:deep(.ant-input-number) {
  width: 100%;
}
</style>
